<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的双向绑定原理</title>
</head>
<body>
    <div>
        <h1 id="hName"></h1>
        用户名:<input type="text" id="inpName"/>
    </div>
    <script>
        let obj = {
            name:''
        }
        // 使用深克隆
        let newObj = JSON.parse(JSON.stringify(obj))
        Object.defineProperty(obj,'name',{
            get(){
                return newObj.name
            },
            set(val){
                if(val === newObj.name)return
                newObj.name = val
                observe()
            }
        })

        function observe(){
            hName.innerHTML = obj.name
            inpName.innerHTML = obj.name
        }
        // 监听input事件
        inpName.oninput = function (){
            obj.name = this.value
        }

    </script>
</body>
</html>
